<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description">
    <meta name="keywords">
    <meta name="location">
    <meta name="FrontBaseUrl" content="//webresource.c-ctrip.com/ResVacationOnline/R8/js/vacation" data-tourexpansion="FrontBaseUrl">
    <meta name="FrontVer" content="2017050301" data-tourexpansion="FrontVer">
    <link rel="shortcut icon" href="//www.ctrip.com/favicon.ico">
    <title>旅游度假 - 国内国际度假服务 - 携程旅行网</title>
    <link href="//webresource.c-ctrip.com/ares2/vacation/tour-booking/8.29.1/default/app-booking/css/common/public_vacation130620.css" rel="stylesheet" type="text/css">
    <link href="//webresource.c-ctrip.com/ares2/vacation/tour-booking/8.29.1/default/app-booking/css/common/public_flights_logo.css" rel="stylesheet" type="text/css">
    <link href="//webresource.c-ctrip.com/ares2/vacation/tour-booking/8.29.1/default/app-booking/css/process_v2/book.css?ver=20181207" rel="stylesheet" type="text/css">
    <style type="text/css">.book_jmpinfo {margin: 20px;color: #666;font: 12px/2 Arial,Tahoma,simsun;-webkit-text-size-adjust: none;}.book_jmpinfo ul,li{list-style: none;}.book_jmpinfo a{color: #00c;cursor: pointer;text-decoration: none;}.book_jmpinfo a: hover{color: #f00;text-decoration: underline;}.book_jmpinfo .font16{font-size: 16px;}.book_jmpinfo .jmp_hd{height:30px; padding-left:10px; background:url(//pic.c-ctrip.com/common/un_base_btn.png) repeat-x 0 -390px; font-size:12px; line-height:30px; color:#333;} .book_jmpinfo .jmp_hd h3{font-size: 12px;} .book_jmpinfo .jmp_bd{padding: 2px 3px!important;} .book_jmpinfo .jmp_alert{border: 1px solid #ffb533; background: #fff5d1;} .book_jmpinfo .base_jmp b{position: absolute; width: 16px; height: 16px; background-image: url(//pic.c-ctrip.com/common/un_jmp_tri.png); left:10px;top:24px;background-repeat: no-repeat; overflow: hidden;} .book_jmpinfo .base_jmp_t{margin-top: 8px;} .book_jmpinfo .base_jmp_r{margin-right: 8px;} .book_jmpinfo .base_jmp_b{margin-bottom: 7px;} .book_jmpinfo .base_jmp_l{margin-left: 8px;} .book_jmpinfo .base_jmp_t b{margin-top: -7px;} .book_jmpinfo .base_jmp_r b{margin-top: 10px; right: 0;} .book_jmpinfo .base_jmp_b b{bottom: -8px;} .book_jmpinfo .base_jmp_l b{margin-top: 10px; left: 9px;} .book_jmpinfo .jmp_title .tri_b{background-position: -32px -32px;} .book_jmpinfo .jmp_alert .tri_t{background-position: -16px 0;} .book_jmpinfo .jmp_alert .tri_r{background-position: -16px -16px;} .book_jmpinfo .jmp_alert .tri_b{background-position: -16px -32px;} .book_jmpinfo .jmp_alert .tri_l{background-position: -16px -48px;} .book_jmpinfo .jmp_table .tri_t{background-position: -32px 0;}.f_error {background-color: #FFF7D9 !important; border-color: #D80000 #E50000 #E50000 #D80000 !important; border-style: solid; border-width: 1px;}</style>
    <link href="//webresource.c-ctrip.com/ResCRMOnline/R6/member/common/css/login_popup_new.css?20150305" rel="stylesheet" type="text/css">
    <noscript>
        <div style="display: inline;">
            <img width="1" height="1" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1066331136/?value=0&amp;label=cG9hCIyRngMQgNi7_AM&amp;guid=ON&amp;script=0" style="border: none;"></div>
    </noscript>
    <style type="text/css">body{margin:0;background-color:#fff;}.cui_hd_cont{background-color:#fff;clear:both;}#cui_hd{font-family:Arial,tahoma,verdana,"Microsoft YaHei",Simsun,sans-serif;line-height:1.5;font-size:12px;}.cui_hd{min-width:980px;max-width:1180px;height:59px;margin:0 auto;padding:0 10px;background-color:#fff;position:relative;}.ctriplogo{position:relative;float:left;width:203px;padding-top:12px;padding-bottom:8px;}.ctriplogo a{display:block;width:203px;height:34px;overflow:hidden;text-indent:-999px;background:url(https://pic.c-ctrip.com/platform/online/login/c_logo2020.png) 0 0 no-repeat;}:root .ctriplogo a{background-image:url(https://pic.c-ctrip.com/platform/online/login/c_logo2020.png);background-size:100% 100%;}.ctriplogo .supplier_logo{position:absolute;top:8px;left:213px;width:900px;height:25px;line-height:25px;overflow:hidden;padding:18px 0 0 0;font-family:Simsun;color:#999;border-left:1px solid #E8E8E8;}.ctriplogo .supplier_logo img{float: left;display:inline-block;margin:-10px 10px 0 18px;}.hhlogo{float:left;width:55px;height:43px;margin-top:6px;padding-left:10px;text-indent:-999px;overflow:hidden;border-left:1px solid #B4B4B4;background:url(https://pic.c-ctrip.com/common/hh_logo.png) no-repeat 10px 100%;}.cui_toolkit{float:right;width:422px;padding-top:20px;text-align:right;color:#bbb;}.cui_toolkit a{text-decoration:none;}.cui_toolkit a:hover{text-decoration:underline;}.cui_kefu{color:#4c4c4c;margin-left:8px;}.cui_username{color:#06c;margin-right:8px;}#base_ft{width:950px;clear:both;text-align:center;padding-top:15px;margin:0 auto 20px;font-family:Arial,verdana;color:#4c4c4c;font-size:12px;}#base_ft a{color:#4c4c4c;margin:0 1px;text-decoration:none;}#base_ft a:hover{text-decoration:underline;}#base_ft p .suggestions{color:#06c;}.cui_hd_cont.yh_hd_cont .cui_search,.cui_hd_cont.yh_hd_cont .nav-tel{display: none;}.cui_hd_cont.yh_hd_cont .yhlogo_content{width: 65px;height: 34px;position: absolute;top:12px;left: 227px;border-left: 1px solid #DDD;padding-left: 24px;box-sizing: border-box;}.cui_hd_cont.yh_hd_cont .yhlogo_content .yhlogo{width: 40px;height: 40px;border-radius: 50%;position: absolute;top:-3px;left: 24px;background-image: url(https://pic.c-ctrip.com/platform/online/home/yh_logo.png);background-size: 100% auto;cursor: default;}</style>
    <style type="text/css">.tuna_jmpinfo form,.tuna_jmpinfo h1,.tuna_jmpinfo h2,.tuna_jmpinfo h3,.tuna_jmpinfo h4,.tuna_jmpinfo ul,.tuna_jmpinfo ol,.tuna_jmpinfo li,.tuna_jmpinfo dl,.tuna_jmpinfo dd,.tuna_jmpinfo dt,.tuna_jmpinfo p,.tuna_jmpinfo hr,.tuna_jmpinfo input{margin: 0;padding: 0}.tuna_jmpinfo {margin: 20px;color: #333;font: 12px/2 Arial,Tahoma,simsun;-webkit-text-size-adjust: none;}.tuna_jmpinfo ul,.tuna_jmpinfo li{list-style: none;}.tuna_jmpinfo a{color: #00c;cursor: pointer;text-decoration: none;}.tuna_jmpinfo a:hover{color: #f00;text-decoration: underline;}.tuna_jmpinfo .font16{font-size: 16px;}.tuna_jmpinfo .jmp_hd{height:30px; padding-left:10px; background:url(//pic.c-ctrip.com/common/un_base_btn.png) repeat-x 0 -390px; font-size:12px; line-height:30px; color:#333;} .tuna_jmpinfo .jmp_hd h3{font-size: 12px;} .tuna_jmpinfo .jmp_bd{padding: 8px 10px;} .tuna_jmpinfo .jmp_title, .jmp_table{border: 1px solid #67a1e2; background: #fff;} .tuna_jmpinfo .jmp_alert{border: 1px solid #ffb533; background: #fff5d1;} .tuna_jmpinfo .jmp_text{border: 1px solid #67a1e2; background: #e8f4ff;} .tuna_jmpinfo .base_jmp b{position: absolute; width: 16px; height: 16px; background-image: url(//pic.c-ctrip.com/common/un_jmp_tri.png); background-repeat: no-repeat; overflow: hidden;} .tuna_jmpinfo .base_jmp_t{margin-top: 8px;} .tuna_jmpinfo .base_jmp_r{margin-right: 8px;} .tuna_jmpinfo .base_jmp_b{margin-bottom: 7px;} .tuna_jmpinfo .base_jmp_l{margin-left: 8px;} .tuna_jmpinfo .base_jmp_t b{margin-top: -7px;} .tuna_jmpinfo .base_jmp_r b{margin-top: 10px; right: 0;} .tuna_jmpinfo .base_jmp_b b{bottom: -8px;} .tuna_jmpinfo .base_jmp_l b{margin-top: 10px; left: 9px;} .tuna_jmpinfo .jmp_title .tri_t, .tuna_jmpinfo .jmp_text .tri_t{background-position: 1px 0;} .tuna_jmpinfo .jmp_title .tri_r, .jmp_text .tri_r{background-position: 0 -16px;} .tuna_jmpinfo .jmp_title .tri_b{background-position: -32px -32px;} .tuna_jmpinfo .jmp_title .tri_l, .jmp_text .tri_l{background-position: 0 -48px;} .tuna_jmpinfo .jmp_text .tri_b{background-position: 0 -32px;} .tuna_jmpinfo .jmp_alert .tri_t{background-position: -15px 0;} .tuna_jmpinfo .jmp_alert .tri_r{background-position: -16px -16px;} .tuna_jmpinfo .jmp_alert .tri_b{background-position: -16px -32px;} .tuna_jmpinfo .jmp_alert .tri_l{background-position: -16px -48px;} .tuna_jmpinfo .jmp_table .tri_t{background-position: -31px 0;} .tuna_jmpinfo .jmp_table .tri_r{background-position: -32px -16px;} .tuna_jmpinfo .jmp_table .tri_b{background-position: -32px -32px;} .tuna_jmpinfo .jmp_table .tri_l{background-position: -32px -48px;} .tuna_jmpinfo .jmp_tab_list{position:relative; padding:10px 10px 0; overflow:hidden; z-index:99; zoom:1;} .tuna_jmpinfo .jmp_tab_list li{float:left;} .tuna_jmpinfo .jmp_tab_list li.current{border:1px solid #67A1E2; border-bottom:1px solid #E8F4FF;} .tuna_jmpinfo .jmp_tab_list li a{display:inline-block; padding:4px 10px 3px;} .tuna_jmpinfo .jmp_tab_list li.current a{border-top:1px solid #fff; color:#333; font-weight:bold;} .tuna_jmpinfo .jmp_tab_bd{ margin:-1px 10px 10px; padding-top:10px; border-top:1px solid #67A1E2; background:#E8F4FF;zoom:1;} .data_form{width: 100%; border-collapse: collapse; border: 2px solid #fff; *border-width: 1px; font:normal 12px Verdana, Simsun;} .data_form th{padding: 5px 10px; border: 1px solid #ccc; text-align: left;} .data_form td{padding: 5px 10px; border: 1px solid #ccc;}.tuna_jmpinfo .active{display:block;}.hotel_everyday_list th { background:#F1F1F1; white-space: nowrap; height:25px; text-align:center; font-weight:normal; }.hotel_everyday_list td { width:60px; margin:0; padding:0; text-align:center; vertical-align: top; line-height:20px; background:url(//pic.c-ctrip.com/mystery_hotels/bg_hotel_breakfast.gif) repeat-x 0 39px; }.hotel_everyday_price { color:#E56700; display:block; }.hotel_everyday_list .hotel_everyday_price em { color:green; font-style:normal; }.hotel_everyday_list span em { color:gray; font-style:normal; }.hotel_everyday_nobreakfast { color:#b4b4b4; }</style></head>

<body data-gr-c-s-loaded="true">
<div id="app">
<div class="cui_hd_cont">
    <div id="cui_hd" class="cui_hd">
        <div class="ctriplogo">
            <a target="_blank" href="http://www.ctrip.com" alt="携程旅行网">携程旅行网</a>
            <div id="cui_provider_logo" class="supplier_logo"></div>
        </div>
        <div class="cui_toolkit">
            <span class="cui_username">尊敬的会员</span>|
            <a target="_blank" href="http://kefu.ctrip.com" class="cui_kefu">客服中心</a></div>
    </div>
</div>
<container style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; z-index: 100;">
    <div id="uid_16018663723885708145066" style="border: 1px solid rgb(204, 204, 204); position: absolute; background-color: rgb(255, 255, 255); min-width: 178px; visibility: hidden; top: 366px; left: 603px;">
        <style>#uid_16018663723885708145066 .emailPrompt{padding:1px;}#uid_16018663723885708145066 .emailPrompt .hover {background-color:#ccc;}#uid_16018663723885708145066 .emailPrompt li {line-height:1.6; cursor:pointer; padding:3px}</style>
        <ul class="emailPrompt"></ul>
    </div>
</container>
<div id="J_bestoneHeader" style="display:none"></div>
<div id="base_bd" class="bg_miancolor">
    <input type="hidden" id="page_id" value="103606">
    <input type="hidden" id="HideIsNoneLogin" name="HideIsNoneLogin" value="T">
    <input type="hidden" id="TrackProductId" value="19083917">
    <input type="hidden" id="bf_ubt_product" value="19083917">
    <input type="hidden" id="sso_loginprocxyPath" name="sso_loginprocxyPath" value="https://vacations.ctrip.com/tour/static/loginprocxy.html">
    <div id="root">
        <div class="bg_gray ">
            <link href="/tour/static/lib/css/comp.css?v=20181227" rel="stylesheet" type="text/css">
            <div class="main">
                <ol class="progress_bar">
                    <li class="complete">
                        <i>
                        </i>选择产品</li>
                    <li class="complete">
                        <i>
                        </i>填写与核对</li>
                    <li>
                        <i>
                        </i>成功提交</li>
                </ol>
                <div class="basefix">
                    <div class="book_main_box">
                        <div class="warning_tip_box">
                            <div class="text_main">
                                <i class="warning_tip_box_icon"></i>
                                <div>旅游提醒：可接待体温正常、持有健康码绿码、未途经或来自国内疫情中、高风险地区的境内人员。 若您持有非绿码、来自或途经国内疫情中、高风险地区、或是港澳台/外籍人员，请务必详细了解当地疫情相关规定，合理安排出行。</div></div>
                        </div>

                        <div class="book_product">
                            <h2>三亚5日4晚跟团游(5钻)·明星20人小团 中秋国庆狂欢！升千元玩水礼包”海上飞龙+潜水“+定制单人海鲜火锅&amp;免税城【180°海景/国际品牌温德姆|喜来登|国光豪生酒店随您选】限时享『24H专车接送机☆双VIP免排队通道☆机场贵宾休息室』省心放心安心</h2>


                        </div>

                        <div class="input_info">
                            <h3>联系人信息
                                <span class="linkman_tips">为方便携程及时与您联系，请准确填写联系人信息（手机号码Email）</span></h3>
                            <div class="product_input layoutfix">
                                <ul class="input_box linkman_info">
                                    <li>
                                        <label class="product_label">人数</label>
                                        <span class="frm_required">*</span>
                                        <input v-model="formValue.personNum" v-number-only type="text" id="personNum" name="personNum" placeholder="请输入人数" class="input_m" data-valid="false" data-message="请填写人数" data-container="uid-0" value="">
                                        <div id="person_num_msg" style="color: red;display: inline-block;" >{{person_num_msg}}</div></li>
                                    <li>
                                    <li>
                                        <label class="product_label">姓名</label>
                                        <span class="frm_required">*</span>
                                        <input v-model="formValue.contactName" type="text" id="contactName" name="contactName" placeholder="请输入联系人姓名" class="input_m" data-valid="false" data-message="请填写姓名" data-container="uid-0" value="">
                                        <div id="contact_name_msg" style="color: red;display: inline-block;" >{{contact_name_msg}}</div></li>
                                    <li>
                                        <label class="product_label">手机号码</label>
                                        <span class="frm_required">*</span>
                                        <input v-model="formValue.phone" type="text" placeholder="境内11位号码" id="phone" name="phone" class="input_m" data-valid="false" data-message="请填写手机号码" data-container="uid-1" value="">
                                        <div id="phone_msg" style="color: red;display: inline-block;" >{{phone_msg}}</div></li>
                                    <li>
                                        <label class="product_label">Email</label>
                                        <input v-model="formValue.email" type="text" placeholder="非必填，用于接收订单确认信息" name="email" name="Email" class="input_m" data-valid="true" data-message="请填写电子邮箱" data-container="uid-2" value="" autocomplete="off">
                                        <span class="hrs hrs_special">如不填写，也可至订单详情中查看相关信息。</span></li>
                                </ul>
                            </div>
                        </div>

                        <noscript></noscript>
                        <div></div>

                        <div class="tips-list">
                            <p>
                                <span class="ico_warning"></span>订单一经提交，我们将立即操作扣款。如订单不确认将全额退款至您的付款账户。</p>
                            <p>
                                <span class="ico_warning"></span>若现在完成预订，订单预计会在2020年10月05日 11:07确认结果</p>
                        </div>
                        <div class="defray_box layoutfix">
                            <div class="defray_shop_box">
                                <a class="prev_stop" href="javascript:void(0)" onclick="history.go(-1)">
                                    <b>
                                    </b>上一步</a>
                            </div>
                            <a @click="doSubmit" class="btn_proess_big">
                                <span>支付</span></a>
                        </div>

                    </div>
                    <div class="price_bar">
                        <div class="price_box_wrap">
                            <div class="price_wrap_content">
                                <h3>
                                    <a href="javascript:;" class="price_detail_box">收起明细
                                        <i class="close"></i></a>费用明细</h3>
                                <div>
                                    <ul class="price_box scroll_y">
                                        <li>
                                            <div class="box_show">
                              <span class="price_item">基本团费
                                <div style="display: inline-block;">
                                  <em class="icon_fee_info"></em></div>
                              </span>
                                                <span class="price_detail">
                                <dfn>¥</dfn><span id="price">{{data.price}}</span></span></div>
                                            <dl class="box_hidden hidden_width">
                                                <dd>
                                                    <span class="price_item" title="成人">成人</span>
                                                    <span class="price_detail">
                                  <dfn>¥</dfn>{{data.price}}/人x1</span></dd>
                                            </dl>
                                        </li>
                                    </ul>
                                    <!--                         <div class="price_rental_box"> -->
                                    <!--                           <span class="price_rental">总额</span> -->
                                    <!--                           <div class="price_number"> -->
                                    <!--                             <strong> -->
                                    <!--                               <dfn>¥</dfn>3279</strong></div> -->
                                    <!--                         </div> -->
                                </div>
                            </div>
                            <a href="javascript:;" class="online_service"></a>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="side_function"></ul>
        </div>
    </div>
    <div id="extra"></div>
</div>
</div>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>

<script type="text/javascript">
    function getParam(variable){
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    var vm=new Vue({
        el:'#app',
        data:{
            id:"",
            data:{

            },
            formValue:{
                personNum:"",
                contactName:"",
                phone:"",
                email:"",
            },
            person_num_msg:"",
            contact_name_msg:"",
            phone_msg:""

        },directives: {
            numberOnly: {
                bind: function (el) {
                    el.handler = function () {
                        el.value = el.value.replace(/\D+/, '')
                    }
                    el.addEventListener('input', el.handler)
                },
                unbind: function (el) {
                    el.removeEventListener('input', el.handler)
                }
            }
        },
        methods:{
            init:function(){
                that=this
                var id=getParam("id");
                this.id=id
                axios.get('check?id='+id).then(function(res){
                    that.data=res.data.data
                })
            },
            doSubmit:function(){
                var validate=true;
                if (this.formValue.personNum==""){
                    this.person_num_msg="请输入人数！"
                    validate=false
                }else{
                    this.person_num_msg=""
                    validate=true
                }
                if (this.formValue.contactName==""){
                    this.contact_name_msg="请输入联系人！"
                    validate=false
                }else{
                    this.contact_name_msg=""
                    validate=true
                }

                if (this.formValue.phone==""){
                    this.phone_msg="请输入电话号码！"
                    validate=false
                }else{
                    this.phone_msg=""
                    validate=true
                }
                if(!validate){
                    return
                }
                let formData = new FormData();
                for(let key in this.formValue){
                    formData.append(key, this.formValue[key])
                }
                formData.append("goodsId", this.id)
                axios.post('submit',formData).then(function(res){
                    // console.log(res.data);
                    alert(res.data.msg)
                });
            }
        },
        mounted:function(){
            this.init()
        }
    })



</script>
</body>

</html>